<template>
    <div>
        <div class="row g-2">
            <div class="col">
                <bi-select placeholder="请选择应用" v-model="currentApp">
                    <bi-select-option v-for="item in appOption" :key="item.name" :value="item.name" :label="item.title"></bi-select-option>
                </bi-select>
            </div>
            <div class="col">
                <bi-select placeholder="请选择类型" v-model="currentType">
                    <bi-select-option value="html" label="Html"></bi-select-option>
                    <bi-select-option value="php" label="PHP"></bi-select-option>
                </bi-select>
            </div>
           
        </div>
    
        <bi-table :data="list" radio height="300" :loading="loading"  @radio-change="select">
            <bi-table-column name="type" label="类型" width="50"></bi-table-column>
            <bi-table-column name="app" label="应用"  width="100"></bi-table-column>
            <bi-table-column name="title" label="名称" v-slot="{row}">
                <div style="display: flex; flex-direction: column;">
                    <div>{{row.title}}</div>
                    <div>{{row.name}}</div>
                </div>
            </bi-table-column>
            
        </bi-table>
    </div>
</template>

<script>
export default {
    dialog:{
        title:'添加插件',
        loading:false
    },
    data(){
        return {
            currentApp:'',
            currentType:'',
            appOption:{},
            allList:{},
            list:[],
            loading:false,
            value:''
        }
    },
    watch:{
        currentApp(){
            this.refresh();
        },
        currentType(){
            this.refresh();
        }
    },
    methods:{
        dialogOk(){

            if (this.value==''){
               this.$alert('请选择插件');
            }

            this.$ajax({
                url:this.$url({controller:'plug',action:'add'}),
                data:{
                    app:this.app,
                    name:this.value
                },
                success:(data)=>{
                    this.dialog.callback();
                    this.dialog.close();
                }
            })

            return false;
        },
        refresh(){
            this.list = [];
            this.loading  = true;
            for (let i in this.allList){
                let item = this.allList[i];
                if (this.currentApp!='' && item.app != this.currentApp){
                    continue;
                }

                if (this.currentType!='' && item.type != this.currentType){
                    continue;
                }

                this.list.push(item);
            }

            this.$nextTick(()=>{
                this.loading = false;
            });
        },
        select(row){
            if (row!=null){
                this.value = row.name;
                console.log(this.value);
            }
        }
    },
    props:{
        app:String
    },
    mounted(){
        this.$ajax({
            url:this.$url({controller:'plug',action:'allList'}),
            success:(data)=>{
                
                for (let i in data){
                    let name = data[i].app;
                    data[i]['name'] = i;
                    if (!this.appOption[name]){
                        this.appOption[name] = this.$admin.getAppInfo(name);
                    }

                    if (name == 'system'){
                        this.appOption['system'] ={name:'system',title:'系统插件'};
                    }
                }
                
                this.allList = data;
                this.refresh();
            },
            over:()=>{
                this.dialog.loading = false;
            }
        })
    }
}
</script>
